<h3>Google Maps
   <small>This directive allows you to add Google Maps Javascript API elements.</small>
</h3>
<div ng-controller="GMapController" class="container-fluid">
   <div class="row">
      <div class="col-md-6">
         <div class="panel panel-default">
            <div class="panel-heading">Classic Map</div>
            <div class="panel-body">
               <div ui-map="myMap1" ui-options="mapOptions1" class="gmap"></div>
            </div>
         </div>
      </div>
      <div class="col-md-6">
         <div class="panel panel-default">
            <div class="panel-heading">Custom zoom</div>
            <div class="panel-body">
               <div ui-map="myMap2" ui-options="mapOptions2" class="gmap"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-md-6">
         <div class="panel panel-default">
            <div class="panel-heading">Different Map Type</div>
            <div class="panel-body">
               <div ui-map="myMap3" ui-options="mapOptions3" class="gmap"></div>
            </div>
         </div>
      </div>
      <div class="col-md-6">
         <div class="panel panel-default">
            <div class="panel-heading">Multiple Markers</div>
            <div class="panel-body">
               <div ui-map="myMap4" ui-options="mapOptions4" class="gmap"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="col-md-12">
         <div class="panel panel-default">
            <div class="panel-heading">Styled Maps</div>
            <div class="panel-body">
               <div ui-map="myMap5" ui-options="mapOptions5" class="gmap"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="text-center">
      <h4>Open map in a modal</h4>
      <!-- Modal Controller-->
      <div ng-controller="ModalGmapController">
         <!-- Button trigger modal -->
         <button ng-click="open()" class="btn btn-primary">Launch Modal</button>
         <!-- Modal inline template-->
         <script type="text/ng-template" id="/myModalContent.html">
            <div class="modal-header"><button type="button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()" class="close">×</button><h4 id="myMapModalLabel" class="modal-title">Google Map Modal</h4></div><div class="modal-body"><div ui-map="myMapModal" ui-options="mapOptionsModal" class="gmap"></div></div><div class="modal-footer"><button ng-click="ok()" class="btn btn-primary">OK</button></div>
         </script>
      </div>
   </div>
</div>